<template>
  <div>

    <!--我的项目组-->
    <div style="width: 98%">
      <h2 style="margin-bottom: 0">我的项目组</h2>
      <div class="grayBoundTop15">
        <div style="margin: auto">
          <el-table
            :data="myGroups"
            border
            style="width: 100%">
            <el-table-column
              align="center"
              prop="name"
              label="项目组">
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberCount"
              label="项目组人数">
            </el-table-column>
            <el-table-column
              align="center"
              prop="description"
              label="说明">
            </el-table-column>
            <el-table-column
              align="center"
              label="本周提交">
              <template scope="scope">
                <el-progress :percentage="myGroups[scope.$index].memberCount>0 ? parseInt(myGroups[scope.$index].posterThisWeek*100 / myGroups[scope.$index].memberCount) : 0"></el-progress>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
              width="200"
            >
              <template scope="scope">
                <el-button @click="handleView(scope.$index, scope.row)" type="primary" size="small">查看</el-button>
                <el-button v-show="!myGroups[scope.$index].isSubscribe" @click="handleSubscribe(scope.$index, scope.row)" size="small">关注</el-button>
                <el-button v-show="myGroups[scope.$index].isSubscribe" @click="handleUnSubscribe(scope.$index, scope.row)" type="danger" size="small">取消关注</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--所有项目组-->
    <div style="width: 98%">
      <!--所有项目组-->
      <h2 style="margin-bottom: 0">所有项目组</h2>
      <div class="grayBoundTop15">
        <div style="margin: auto">
          <el-table
            :data="allGroups"
            border
            style="width: 100%">
            <el-table-column
              align="center"
              prop="name"
              label="项目组">
            </el-table-column>
            <el-table-column
              align="center"
              prop="memberCount"
              label="项目组人数">
            </el-table-column>
            <el-table-column
              align="center"
              prop="description"
              label="说明">
            </el-table-column>
            <el-table-column
              align="center"
              label="本周提交">
              <template scope="scope">
                <el-progress :percentage="allGroups[scope.$index].memberCount>0 ? parseInt(allGroups[scope.$index].posterThisWeek*100 / allGroups[scope.$index].memberCount) : 0"></el-progress>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              label="操作"
            >
              <template scope="scope">
                <el-button v-show="adminPrivileges" @click="handleAdmin(scope.$index, scope.row)" size="small">管理</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>

    <!--div for space-->
    <div class="div-margin20"></div>
  </div>
</template>

<script>

  import * as $utils from '../utils/HHUtil';
  import * as api_group from '../api/group';
  import {mapGetters} from 'vuex';
  import {Card, Col, Row, Tabs, TabPane, Input, Progress, Checkbox, Button, Table, TableColumn} from 'element-ui';


  export default {
    props: {},
    computed:{
      ...mapGetters(['userInfo']),
      adminPrivileges: ()=>{
        return $utils.hasPrivileges(['管理员']);
      }
    },
    components: {
      'el-card': Card,
      'el-col': Col,
      'el-row': Row,
      'el-input': Input,
      'el-progress': Progress,
      'el-checkbox': Checkbox,
      'el-button': Button,
      'el-table': Table,
      'el-table-column': TableColumn
    },
    data() {
      return {
        myGroups: [],
        allGroups: []
      };
    },
    methods: {
      handleSubscribe(index, row) {
        let form = new FormData();
        form.append("userId", this.userInfo.id);
        form.append("groupId", this.myGroups[index].id);
        form.append("isSubscribe", true);
        api_group.setSubscribe(form).then(() => {
          this.refresh();
        }).catch((err) => {
          this.$message.error("关注失败：" + err.errmsg);
        });
      },
      handleUnSubscribe(index, row) {
        let form = new FormData();
        form.append("userId", this.userInfo.id);
        form.append("groupId", this.myGroups[index].id);
        form.append("isSubscribe", false);
        api_group.setSubscribe(form).then(() => {
          this.refresh();
        }).catch((err) => {
          this.$message.error("取消关注失败：" + err.errmsg);
        });
      },
      handleView(index, row) {
        let groupId = this.myGroups[index].id;
        let week = this.$hhUtil.weekOfYear();
        let year = new Date().getFullYear();
        this.$router.push({name: 'review', params: {userId:1, groupId, week, year}});
      },
      handleAdmin(index,row){
        let groupId = this.allGroups[index].id;
        this.$router.push({name: 'adminGroupProperties', params: {groupId}})
      },
      updateGroupPostInfo(){
        api_group.getGroupsInfo().then((data)=>{
          this.myGroups = data.myGroups.body;
          this.allGroups = data.allGroups.body;
          this.$message.success('刷新了新的数据！');
        }).catch((err)=>{
          this.$message.error('刷新数据失败：'+err.errmsg);
        });
      },
      refresh(){
        this.updateGroupPostInfo();
      }
    },
    created() {

    },
    mounted() {
      this.refresh();
    }
  };

</script>

<style>

</style>
